import React, { Component } from 'react'
import '../assert/css/cart.css';
import Header from "../components/DefaultHeader"
import { getCartNumber, cartDelete } from '../request/cart_request'
export default class Cart extends Component {
    state = {
        carChecked: true
    }
    UNSAFE_componentWillMount() {

    }
    updateChecked(id) {
        //修改每个商品的是否选择
        const index = this.props.CarList.findIndex(item => item.id === id)
        const { checked } = this.props.CarList[index]
        this.props.CarList[index].checked = !checked
        //修改商品选择后，全选的状态
        const carChecked = this.props.CarList.every(item => item.checked)
        this.setState({ carChecked })
    }
    toggleCheckd() {
        const t_checked = !this.state.carChecked
        this.props.CarList.forEach(item => {
            item.checked = t_checked
        })
        this.setState({ carChecked: t_checked })
    }
    carCount() {
        var number = 0
        //过滤出所有选中的
        const list = this.props.CarList.filter(item => {
            return item.checked
        })

        number = getCartNumber(list)
        return number
    }
    carPrice() {
        var price = 0
        //过滤出所有选中的
        const list = this.props.CarList.filter(item => {
            return item.checked
        })
        list.forEach(item => {
            const n_price = item.price * item.num
            price += n_price
        })

        return price.toFixed(2)
    }
    del(id) {
        // 删除数据
        cartDelete(id).then(res => {
            if (res.code === 200) {
                this.props.restCarList()
            }
        })
    }
    render() {
        const { CarList } = this.props;
        const { carChecked } = this.state
        return (
            <div className="cart-container">
                <Header title="购物车" />
                <ul className="cart-list">
                    {
                        CarList.map(item => (
                            <li key={item.id}>
                                <input type="checkbox" checked={item.checked} onChange={() => this.updateChecked(item.id)} />

                                <img src={this.$static_host + item.img} alt="" />
                                <div className="info">
                                    <h5>{item.goodsname}</h5>
                                    <h5 className="price">
                                        &yen;{item.price}
                                        <span className="market-price">&yen; 49999</span>
                                    </h5>
                                </div>
                                <div className="options">
                                    <div className="stepper">
                                        <button>-</button>
                                        <span>{item.num}</span>
                                        <button>+</button>
                                    </div>
                                    <button className="btn-danger" onClick={() => this.del(item.id)}>删除</button>
                                </div>
                            </li>
                        ))
                    }


                </ul>
                <div className="submit-bar">
                    <label><input type="checkbox" checked={carChecked} onChange={() => this.toggleCheckd()} /> 全选</label>
                    <div className="price">订单总金额: &yen; {this.carPrice()}</div>
                    <button className="btn-order">去结算({this.carCount()}件)</button>
                </div>
            </div>
           
        )
    }
}
